<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表排序</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <h2>人员列表</h2>
            <button @click="updateMei">更新马冬梅的信息</button>
            <ul>
                <li v-for="(p, index) of persons" :key="index">
                    {{p.name}}: {{p.age}}： {{p.sex}}
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false    // 阻止Vue在启动时生成生产提示

            // 使用计算属性实现列表过滤
            new Vue({
                el: '#root',
                data: {
                    persons: [
                        {id: '001', name: "周冬雨", age: 18, sex: '女'},
                        {id: '002', name: "马冬梅", age: 19, sex: '女'},
                        {id: '003', name: "周杰伦", age: 20, sex: '男'},
                        {id: '004', name: "温兆伦", age: 21, sex: '男'}
                    ]
                },
                methods: {
                    updateMei(){
                        // 一个一个属性修改是生效的
                        // this.persons[1].name = '马妹妹'
                        // this.persons[1].age = 20
                        // this.persons[1].sex = '女'

                        // 但是整个对象修改不生效了
                        this.persons[1] = {id: '002', name: "马老师", age: 19, sex: '女'}
                        // 下列方法生效
                        this.persons.splice(1, 1, {id: '002', name: "马老师", age: 19, sex: '女'})
                    }
                },
            })
        </script>
    </body>
</html>
